<template>
  <div class="error-tip" v-if="errorCode">
    <img :src="errorImage" alt="" />
    <p>{{ errorData[errorCode] }}</p>
  </div>
</template>

<script>
import errorImg from "@/assets/img/error.png";
import errorData from "@/data/error";
import { ref, computed } from "vue";
import { useStore } from "vuex";

export default {
  name: "ErrorTip",
  setup(props) {
    const errorImage = ref(errorImg),
      store = useStore();

    return {
      errorImage,
      errorData,
      errorCode: computed(() => store.state.errorCode),
    };
  },
};
</script>

<style lang="scss" scoped>
.error-tip {
  text-align: center;
  height: 470px;
}
</style>
